﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			body{
				background-image: url("图片/3.jpg");
				background-position: center center;
				background-repeat: no-repeat;
			}
			.card{
				width: 300px;
				height: 300px;
				background-color: white;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				transition: all 1s ease; 
			}
			.card-outside,.card-inside{
				position: absolute;
				right: 0;
				width: 300px;
				height: 300px;
			}
			.card-outside{
				z-index: 100;
				perspective: 1000px;
			}
			.card-outside-container{
				width: 100%;
				height: 100%;
				transform-style: preserve-3d;
				transform-origin: left;
				transition: all 1s ease;
			}
			.card:hover .card-outside-container{
				transform: rotateY(-180deg);
			}
			.card:hover{
				width: 500px;
			}
			.card-front,.card-back{
				width: 100%;
				height: 100%;
				position: absolute;
				backface-visibility: hidden;
				right: 0;
				background-color: white;
			}
			.card-front-top{
				width: 100%;
				height: 240px;
				background: linear-gradient(to bottom,#ff73b9,#ff40a1);
				clip-path: polygon(0 0,100% 0,100% 90%,57% 90%,50% 100%,43% 90%,0 90%);
			}
			.card-front-top img{
				width: 100%;
				height: 100%;
			}
			.card-front-bot{
				font-size: 26px;
				background-image: linear-gradient(to top,#ff73b9 , #00C6FF);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-weight: 800;
				text-align: center;
			}
			.card-back{
				transform: rotateY(180deg);
			}
			.video-container{
				width: 100%;
				height: 100%;
				object-fit: cover;
				clip-path: polygon(0 0,100% 0,90% 50%,100% 100%,0 100%);
			}
			.card-inside{
				z-index: 99;
			}
			#typewrite{
				color: black;
				font-size: 15px;
				text-align: center;
				line-height: 20px;
				background-image: linear-gradient(to top,#ff73b9 , #00C6FF);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;   

			}
		</style>
	</head>
<body>
	<div class="card" >
		<!-- 封面 -->
		<div class="card-outside">
			<div class="card-outside-container">
				<!-- 正面 -->
				<div class="card-front">
					<div class="card-front-top">
						<img src="./图片/7.jpg" alt="">
					</div>
					<div class="card-front-bot">
						View Me
					</div>
				</div>
				<!-- 反面 -->
				<div class="card-back">
					<video class="video-container" autoplay muted loop>
						<source src="./图片/1.mp4" type="">
					</video>
				</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="card-inside">
			<div class="card-inside-container">
				<div id="typewrite"></div>
			</div>
		</div>
	</div>
	
	

</body>
<script>
	 let str="......用真诚经营爱情，<用执着追求事业，<用善良对待朋友，<用平淡对待磨难，<用虔诚祈盼幸福，<用感恩回报人间，<心随爱走，爱随心愿，<祝福你新年快乐！！！";
	 let strp="";
	 let i=0;
	 /**
	  * 打字效果
	  */
	 function print1()
	 {
	     if(str[i]!='<')
	     {
	         strp+=str[i];
	         document.getElementById("typewrite").innerHTML=strp+'|';
	     }
	     else
	     {
	         document.getElementById("typewrite").innerHTML=strp+"<br><br>"+'|';
	         strp+="<br><br>";
	     }
	     i++;
	 }
	
	 /**
	  * print2作为最后的光标闪动的效果
	  */
	 function print2()
	 {
	     setTimeout(()=>{document.getElementById("typewrite").innerHTML=strp+' ';},100);
	     setTimeout(()=>{document.getElementById("typewrite").innerHTML=strp+'|';},630);
	 }
	
	 /**
	  *setInterval函数控制打字速度
	  */
	 let printid=setInterval(() => {
	     print1();
	     if(i==str.length)
	     clearInterval(printid);
	 },90);  
	 
	 /**
	  * 光标闪动速度，默认模拟电脑正常光标闪动，0.53秒闪一次
	  */
	 setTimeout(() => {
	     id=setInterval(print2,1060);//注意setInterval内部直接写函数的时候是直接写函数名不加括号的。
	 },(str.length-1)*90);
	 //
	
	

</script>
</html>